<template>
    <div>
        <group class="weui-cells_form">
            <x-input title="手机号" type="tel" :show-clear="false" :max="13" v-model="phone">
                <x-button slot="right" @click.native="sendmsg" :disabled="sending" type="primary" :text="countTime"
                          mini>
                </x-button>
            </x-input>
            <x-input title='验证码' :max="6" v-model="yzm"></x-input>
        </group>
        <group>
            <x-button @click.native="renzphone" type="primary">立即绑定</x-button>
            <x-button @click.native="closep" type="default">取消</x-button>
        </group>
    </div>
</template>

<script>
    import {getMytoken} from '../../../service/common';
    import {sendMsgR, bindRealNameR, bindPhonewxR} from '../../../service/my';
    import {mapState} from 'vuex';
    import {concat} from 'ramda';
    import store from '../../../store/index';
    import store2 from 'store2';
    import {XInput, Group, XButton, Cell} from 'vux';
    import {Countdown} from '../../../uitls/timer';
    import {isphone, isWeixin} from '../../../uitls/common';
    export default {
        components: {XInput, Group, XButton, Cell},
        data() {
            return {
                phone: '',
                yzm: '',
                countTime: '获取验证码',
                sending: false,
                RandomGuid: ''
            };
        },
        created() {
        },
        computed: {
            ...mapState('common', ['showBindPhone'])
        },
        methods: {
            closep(){
                store.commit('common/changevalue', {showBindPhone: false});
            },
            async renzphone(){
                const {phone, yzm, RandomGuid}=this;
                if(!isphone(phone)) {
                    this.$vux.toast.text('输入手机号');
                    return;
                }
                if(yzm === '') {
                    this.$vux.toast.text('输入验证码');
                    return;
                }
                if(RandomGuid === '') {
                    this.$vux.toast.text('请发送验证码');
                    return;
                }
                //兼容 微信认证
                const {token}=await getMytoken();
                const iswx = isWeixin();
                const bindFn = iswx ? bindPhonewxR : bindRealNameR;
                const {data}=await bindFn(iswx ? {
                    UserIDGuid: token,
                    Mobile: phone,
                    ValidCode: yzm,
                    RandomGuid
                } : {
                    TypeID: 7,
                    UserIDGuid: token,
                    Mobile: phone,
                    ValidCode: yzm,
                    RandomGuid
                });
                if(data && data.code === 0) {
                    this.$vux.toast.text('绑定成功');
                    if(iswx) {
                        store.commit('common/changevalue', {showBindPhone: false});
                        store2('userInfo', {...store2('userInfo'), Mobile: phone});
                        return;
                    }
                    this.$router.replace('/my/center');
                }
                else {
                    this.$vux.toast.text(data.msg);
                }

            },
            async sendmsg(){
                const {phone}=this;
                const iswx = isWeixin();
                const {token}=await getMytoken();
                if(isphone(phone)) {
                    const {data}=await sendMsgR({TypeID: iswx ? 4 : 2, UserIDGuid: token, Mobile: phone});
                    if(data && data.code === 0) {
                        this.countdown();
                        this.RandomGuid = iswx ? data.data : data.data.RandomGuid;
                    }
                    else {
                        this.$vux.toast.text(data.msg);
                    }
                    return;
                }
                this.$vux.toast.text('请输入正确手机号');
            },
            countdown(){
                this.sending = true;
                let countdowns = new Countdown(59000, (data, isend)=> {
                    if(isend) {
                        this.sending = false;
                        this.countTime = `获取验证码`;
                    }
                    else {
                        this.countTime = `${data[0]}秒后获取`;
                    }
                }, 0);
                countdowns.start();
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../../app";

    .item () {
        height: 120px;
        box-sizing: border-box;
        border-bottom: 1px solid @color12;
        padding: 0 20px;
        background: #fff;
        display: flex;
        align-items: center;
        &:last-child {
            border: none;
        }
        .ranknum {
            border-radius: 50%;
            background: #f3f3f3;
            font-size: @fz26;
            color: @color2;
            width: 38px;
            .setnormalcss(38px);
            box-shadow: 0 2px 1px #b2b2b2;
            font-weight: bolder;
            &.r {
                width: 37px;
                height: 52px;
            }

            &.r0 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160543.png) no-repeat center;
                background-size: contain;
            }
            &.r1 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160544.png) no-repeat center;
                background-size: contain;
            }
            &.r2 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160545.png) no-repeat center;
                background-size: contain;
            }
        }
        .imghead {
            width: 88px;
            height: 88px;
            margin-right: 30px;
            position: relative;
            i {
                position: absolute;
                background: @color22;
                color: #fff;
                width: 30px;
                font-size: @fz24;
                .setnormalcss(30px);
                border-radius: 50%;
                right: -10px;
                top: 0;
                display: block;
            }
            img {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                box-sizing: border-box;
                border: 2px solid #bebfbf;
            }
        }
        .middlename {
            flex: 1;
            display: flex;
            align-items: center;
            strong {
                font-size: @fz32;
                font-weight: bolder;
            }
            em {
                border: 1px solid @color22;
                border-radius: 32px;
                display: inline-block;
                .setnormalcss(32px);
                color: @color22;
                font-size: @fz24;
                width: 120px;
                margin-left: 10px;
            }
        }
        .rednum {
            display: flex;
            flex-direction: column;
            text-align: center;
            strong {
                font-size: @fz48;
                color: @color22;
                line-height: 1;
                font-weight: bolder;
            }
            b {
                line-height: 1;
                font-size: @fz24;
                color: @color3;
            }
        }
    }

    .attentiongod {
        height: 100%;
    }

    .listcon {
        li {
            .item();
        }
    }
</style>